<template>
    <div>
    <div class="goodsindex">
      <el-form ref="form" :model="queryInfo" >
        <!-- 搜索条件 -->
        <el-row :gutter="20" class="goodsindex-queryInfo">
            <!-- 用户账号或者昵称 -->
            <el-col :xs="8" :sm="6" :md="6" :lg="4" :xl="4">
                <el-select  class="goodsindex-queryInfo-li" v-model="queryInfo.user_login_name" filterable size="small" clearable placeholder="请选择用户账号或者昵称">
                  <el-option
                      v-for="item in user_login_name"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                  </el-option>
                </el-select>
            </el-col>
            <!-- 用户邮箱搜索 -->
            <el-col :xs="8" :sm="6" :md="6" :lg="4" :xl="4">
                <el-input class="goodsindex-queryInfo-li" v-model="queryInfo.email" clearable size="small" placeholder="请输入用户邮箱"></el-input>
            </el-col>
            <!-- 用户积分搜索 -->
            <el-col :xs="8" :sm="6" :md="6" :lg="4" :xl="4">
                <el-input-number class="goodsindex-queryInfo-li" v-model.number="queryInfo.integral" controls-position="right" :min="0" :max="999999" size="small" placeholder="请输入用户积分"></el-input-number>
            </el-col>
            <!-- 用户性别搜索 -->
            <el-col :xs="8" :sm="6" :md="6" :lg="4" :xl="4">
                <el-select  class="goodsindex-queryInfo-li" v-model="queryInfo.gender" size="small" clearable placeholder="请选择用户性别">
                    <el-option label="" value=""></el-option>
                    <el-option label="男" value="男"></el-option>
                    <el-option label="女" value="女"></el-option>
<!--                    <el-option labels="美国(97)" value="美国(97)"></el-option>-->
                </el-select>
            </el-col>

            <!-- 用户是否禁用状态搜索 -->
            <el-col :xs="8" :sm="6" :md="6" :lg="4" :xl="4">
                <el-select  class="goodsindex-queryInfo-li" v-model="queryInfo.is_delete" size="small" clearable placeholder="请选择禁用状态">
                    <el-option label="" value=""></el-option>
                    <el-option label="正常" value="0"></el-option>
                    <el-option label="禁用" value="1"></el-option>
                </el-select>
            </el-col>

            <el-col :xs="6" :sm="4" :md="3" :lg="2" :xl="2">
                <el-button type="primary" class="goodsindex-queryInfo-li" size="small" @click="search()">搜索</el-button>
            </el-col>
            <el-col :xs="6" :sm="4" :md="3" :lg="2" :xl="2">
                <el-button type="success" class="goodsindex-queryInfo-li" size="small" @click="addForm()">添加</el-button>
            </el-col>
        </el-row>
      </el-form>
        <!-- 检索结果 -->
        <el-row :gutter="20" class="goodsindex-list">
            <el-col :span="24">
                <el-table
                        :data="tableData"
                        border
                        size='small'
                        style="width: 100%">
                    <el-table-column
                            type="index"
                            label="序号"
                            width="80">
                    </el-table-column>
                    <el-table-column
                            prop="portrait"
                            label="头像"
                            width="80">
                      <template v-slot:default="scope">
                        <img :src="scope.row.portrait_url" width="30" height="30" />
                      </template>
                    </el-table-column>
                  <el-table-column
                      prop="is_delete_text"
                      label="状态"
                      width="80">
                  </el-table-column>
                    <el-table-column
                            prop="user_id"
                            label="用户id"
                            width="80">
                    </el-table-column>
                    <el-table-column
                            prop="user_name"
                            label="用户名称(昵称)"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="user_login"
                            label="用户登录账号"
                            width="180">
                    </el-table-column>
<!--                  这里需要经过转换-->
                    <el-table-column
                            prop="display_name_text"
                            label="公开显示"
                            width="80">
                    </el-table-column>
                    <el-table-column
                            prop="email"
                            label="用户邮箱"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="phone"
                            label="用户手机号"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="gender"
                            label="性别"
                            width="80">
                    </el-table-column>
                    <el-table-column
                            prop="integral"
                            label="积分"
                            width="80">
                    </el-table-column>
                    <el-table-column
                            prop="user_description"
                            label="描述"
                            width="80">
                    </el-table-column>

                    <el-table-column
                            fixed="right"
                            label="操作"
                    >
                        <template v-slot:default="scope">
                            <el-button type="text" size="small" @click="editForm(scope.$index,scope.row)">编辑</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-col>
        </el-row>
        <!-- 分页 -->
        <el-row :gutter="20" class="goodsindex-list">
            <el-col :span="24" class="goodsindex-page-box">
                <el-pagination

                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="queryInfo.page"
                        :page-sizes="[10, 20, 50, 100]"
                        :page-size="queryInfo.pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="queryInfo.total">
                </el-pagination>
            </el-col>
        </el-row>
    </div>
<!--      新增和修改页面子组件-->
        <UsersSaveView :visible-child.sync="visible" :childFrom="UserForm" :user-id="userId"></UsersSaveView>
    </div>
</template>


<script>
    import UsersSaveView from "@/views/users/UsersSaveView";
    import {getBaseUsers, usersAll} from "@/api/api.js";
    import { path } from "@/utils/path"
    export default {
        data(){
            return {
                visible:false,
                tableData: [],
                // 这是账号和名称的搜索框
                user_login_name:[],
                queryInfo:{
                    user_login_name:'',
                    // user_name: '',
                    // user_login: '',
                    gender:'',
                    email:'',
                    integral: 0,
                    is_delete:'',
                    page: 1 ,
                    pageSize: 10,
                    total:10
                },
                // 这是给子组件传递的参数
                UserForm:{
                  portrait_url:'',
                  portrait_text:'',
                  portrait:'',
                  user_name: '',
                  user_login: '',
                  password: '',
                  gender:'',
                  email:'',
                  phone:'',
                  integral: 0,
                  is_delete:0,
                },
                userId:-1
            }
        },
        components:{
            UsersSaveView
        },
        methods:{
            handleSizeChange(pageSize){
              // console.log('1',pageSize);
              this.users([],this.queryInfo.page,pageSize);

            },
            handleCurrentChange(page){
              // console.log('2',page);
              this.users([],page,this.queryInfo.pageSize);
            },
            search(){
              this.users(this.queryInfo,this.queryInfo.page,this.queryInfo.pageSize);
            },
            addForm(){
                this.visible = true;
            },
            editForm(index,value){
                this.visible = true;
                // console.log(index,value);
                this.UserForm = value;
                this.userId   = value.user_id;
            },
            getUsers(){
              getBaseUsers().then((res) =>{
                // console.log("getUsers",res)
                if (res.code === 200){
                    let options = [
                      {
                        label: '',
                        value: ''
                      }
                    ];
                    this.$.each(res.data,(index,values)=>{
                          options.push({
                            label:values.user_login + '---' + (values.user_name !== '' ? values.user_name : "???"),
                            value:values.user_id
                          })
                    })
                  this.user_login_name = options;
                  // console.log('user_login_name',this.user_login_name);
                }
              }).catch(error =>{
                  this.$message({
                      type:'error',
                      message:error.message || 'Error'
                  });
              })
            },
            // 查询用户数据
            users(data,page,pageSize){
              usersAll(data,page,pageSize).then((res) =>{
                // console.log('res123',res)
                if (res.code === 200){
                  // 这个分页的三条数据是为了防止分页器添加或者修改数据之后产生的bug,尤其是选择了多个分页条数之后
                  this.queryInfo.total = res.data.total;
                  // current_page	当前页码
                  this.queryInfo.page  = res.data.current_page;
                  // per_page	每页条数
                  this.queryInfo.pageSize  = res.data.per_page;
                  this.tableData = res.data.data;
                  // display_name,默认显示的名称，is_delete是否禁用，attach附件url
                  this.tableData.forEach((item)=>{
                    item.display_name == 0 ? (item.display_name_text = item.user_login) : (item.display_name_text = item.user_name)
                    item.is_delete == 0 ? (item.is_delete_text = '正常') : (item.is_delete_text = '禁用')
                    item.attach !== null ? (item.portrait_text = item.attach.attach_name) : (item.portrait_text = '')
                    item.attach !== null ? (item.portrait_url = path + item.attach.attach_url) : (item.portrait_url = '')
                  })
                }
              }).catch(error =>{
                // console.error('error',error)
                // alert(error.message || 'Error')
                  this.$message({
                      type:'error',
                      message:error.message || 'Error'
                  });
              })
            }
        },
        created(){
          this.users([],this.queryInfo.page,this.queryInfo.pageSize);
          this.getUsers();
        }
    }
</script>

<!--<style scoped>-->
<!--    .goodsindex{-->
<!--        width: 100%;-->
<!--        min-height: 100%;-->
<!--        padding: 15px;-->
<!--        box-sizing: border-box;-->
<!--    }-->
<!--    /* 搜索 */-->
<!--    .goodsindex-queryInfo{-->
<!--        margin-bottom: 10px;-->
<!--    }-->
<!--    .goodsindex-queryInfo-li{-->
<!--        width: 100%;-->
<!--        height: auto;-->
<!--    }-->
<!--    /* 列表 */-->
<!--    .goodsindex-list{-->
<!--        width: 100%;-->
<!--        height: auto;-->
<!--        margin-bottom: 20px;-->
<!--    }-->
<!--    /* 分页 */-->
<!--    .goodsindex-page-box{-->
<!--        width: 100%;-->
<!--        height: auto;-->
<!--        display: flex;-->
<!--        justify-content: flex-end;-->
<!--    }-->
<!--</style>-->